<template>
  <main class="pug-pro-basicLayout-content pug-pro-basicLayout-has-header">
    <div class="pug-pro-page-container">
      <div class="pug-pro-page-container-warp">
        <div class="pug-page-header has-breadcrumb">
          <div class="pug-page-header-heading">
            <div class="pug-page-header-heading-left"><span class="pug-page-header-heading-title"
                                                            title="高级表单">文件上传</span></div>
          </div>
          <div class="pug-page-header-content">
            <div class="pug-pro-page-container-detail">
              <div class="pug-pro-page-container-main">
                <div class="pug-pro-page-container-row">
                  <div class="pug-pro-page-container-content">高级表单常见于一次性输入和提交大批量数据的场景。</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="uploader" class="wu-example">
        <div class="btns">
          <div id="picker" class="picker">选择文件</div>
        </div>
        <!--用来存放文件信息-->
        <div class="cinfo">{{ info }}</div>
        <div id="fileLilst" class="uploader-list">
          <div :id="file.id" class="file-item thumbnail" v-for="(file,index) in fileList" :key="index">
            <img :src="file.img" v-if="file.img">
            <h4 class="info">{{file.name}}</h4>
            <p class="state">{{file.info}}</p>
            <div class="progress-bar" v-show="hidepercent">
              <div class="progress progress-striped active">
                <div class="progress-bar" role="progressbar" :style="{'width': file.percent}"></div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="result">上传的结果是：{{result}}</div>
      </div>
    </div>
  </main>
</template>


<script>
import $ from 'jquery'
import WebUploader from 'webuploader'

export default {
  name: 'HelloWorld',
  data() {
    return {
      info: "",
      result:null,
      fileList: []
    }
  },
  mounted() {
    var that = this;
    const uploader = WebUploader.create({

      // swf文件路径
      swf: '../assets/lib/webuploader/Uploader.swf',
      // 文件接收服务端。
      server: '/admin/v1/upload/oss/file',
      // 选择文件的按钮。可选。
      // 内部根据当前运行是创建，可能是input元素，也可能是flash.
      pick: '#picker',
      // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
      resize: false,
      //是否开启自动上传
      auto: true
    });

    uploader.on('beforeFileQueued', function (file) {
      console.log('文件加入队前', file)
    });


    // 当有文件被添加进队列的时候
    uploader.on('fileQueued', function (file) {
      that.info = '文件加入队列后';
      file.hidepercent = false;
      file.percent = "0%";
      file.info = "开始上传";
      that.fileList.push(file);
    });


    // 文件上传过程中创建进度条实时显示。
    uploader.on('uploadProgress', function (file, percentage) {
      that.info = '文件上传中' + file + ',进度是：' + percentage;
      var fileObj = that.fileList.find(f=>f.id == file.id);
      fileObj.percent = percentage * 100 + '%';
      fileObj.info = "上传中";
    });


    uploader.on('uploadSuccess', function (file, response) {
      that.info = '文件上传成功 ,'+ file+',结果是：'+ response;
      that.result = response;
      var fileObj = that.fileList.find(f=>f.id == file.id);
      fileObj.img = response.data.url;
      fileObj.info = "已上传";
    });

    uploader.on('uploadError', function (file, reason) {
      that.info = '文件上传失败' + file + ',失败原因是：' + reason;
      var fileObj = that.fileList.find(f=>f.id == file.id);
      fileObj.info = "上传出错";
    });


    uploader.on('uploadComplete', function (file) {
      that.info = '文件上传完成'
      var fileObj = that.fileList.find(f=>f.id == file.id);
      fileObj.hidepercent = true;
    });
  },
  methods: {}
}
</script>

<style scoped>


</style>
